<template>
  <div class="return">
    <transition name="returnLeft">
      <div class="bigBoxLeft" v-if="isShowleft">
        <div class="sideBoxLeft">
          <img src="../assets/left.png" />
        </div>
      </div>
    </transition>
    <transition name="returnRight">
      <div class="bigBoxRight" v-if="isShowright">
        <div class="sideBoxRight">
          <img src="../assets/right.png" />
        </div>
      </div>
    </transition>
  </div>
</template>

<style lang="less" scoped>
.return {
  width: 100%;
  z-index: 10000;

  .bigBoxLeft {
    width: 70px;
    margin: 0 auto;

    .sideBoxLeft {
      width: 70px;
      height: 70px;
      background: #e0e8f6;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 45px;
      }
    }
  }

  .bigBoxRight {
    width: 70px;
    margin: 0 auto;

    .sideBoxRight {
      width: 70px;
      height: 70px;
      background: #e0e8f6;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 45px;
      }
    }
  }
}

// 动画过渡是 name 属性！！！不是 class 属性 <====
// 左部分开始
.returnLeft-enter {
  transform: translateX(-100%);
  opacity: 0;
}
.returnLeft-enter-active {
  transition: all 0.3s;
}
.returnLeft-enter-to {
  transform: translateX(0px);
  opacity: 1;
}

.returnLeft-leave {
  transform: translateX(0px);
  opacity: 1;
}
.returnLeft-leave-active {
  transition: all 0.3s;
}
.returnLeft-leave-to {
  transform: translateX(100%);
  opacity: 0;
}
// 左部分结束

// 右部分开始
.returnRight-enter {
  transform: translateX(100%);
  opacity: 0;
}
.returnRight-enter-active {
  transition: all 0.3s;
}
.returnRight-enter-to {
  transform: translateX(0px);
  opacity: 1;
}

.returnRight-leave {
  transform: translateX(0px);
  opacity: 1;
}
.returnRight-leave-active {
  transition: all 0.3s;
}
.returnRight-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}
// 右部分结束
</style>

<script>
export default {
  name: "ReturnComponent",
  data() {
    return {
      // isShowleft: true,
      isShowleft: false,

      // isShowright: true,
      isShowright: false,

      startX: 0,
      moveX: 0,
      X: 0,
    };
  },
  methods: {
    gotoHomeFn() {
      if (this.isShowleft || this.isShowright) {
        return this.$router.push({ path: "/" }).catch(() => {});
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      document.addEventListener("touchstart", (e) => {
        this.startX = e.touches[0].pageX;
        // console.log("按下", this.startX);
        // console.log("按下", this.moveX);
        // console.log("按下", this.X);
      });

      document.addEventListener("touchmove", (e) => {
        this.moveX = e.touches[0].pageX;
        if (this.X > 0 && Math.abs(this.X) > 100) {
          this.isShowleft = true;
        }
        if (this.X < 0 && Math.abs(this.X) > 100) {
          this.isShowright = true;
        }
        // console.log("按下移动", this.startX);
        // console.log("按下移动", this.moveX);
        // console.log("按下移动", this.X);
      });

      document.addEventListener("touchend", () => {
        this.X = this.moveX - this.startX;
        this.isShowleft = false;
        this.isShowright = false;
        setTimeout(() => {
          this.$router.push({path: "/"}).catch(()=>{});
        }, 1000);
        // console.log("按下移动离开", this.startX);
        // console.log("按下移动离开", this.moveX);
        // console.log("按下移动离开", this.X);
      });
    });
  },
  updated() {
    this.startX = 0;
    this.moveXX = 0;
    this.X = 0;
  },
};
</script>
